<div class="gh-stack-item gh-setting-last">
    <div class="flex-grow-1">
        <label class="gh-setting-title gh-theme-setting-title" for="logged-out">
            Visibility
        </label>

        <div class="form-group mt3 mb0 for-checkbox">
            <label class="checkbox" for="logged-out">
                <input
                    type="checkbox"
                    id="logged-out"
                    name="logged-out"
                    class="gh-input"
                    value={{this.visibilityOptions.visitors}}
                    checked={{this.isVisitorsChecked}}
                    {{on "click" this.updateVisibility}}
                >
                <span class="input-toggle-component"></span>
                <span>Logged out visitors</span>
            </label>

            {{#if this.isPaidAvailable}}
                <label class="checkbox" for="free">
                    <input
                        type="checkbox"
                        id="free"
                        name="free"
                        class="gh-input"
                        value={{this.visibilityOptions.freeMembers}}
                        checked={{this.isFreeMembersChecked}}
                        {{on "click" this.updateVisibility}}
                    >
                    <span class="input-toggle-component"></span>
                    <span>Free members</span>
                </label>
                <label class="checkbox" for="paid">
                    <input
                        type="checkbox"
                        id="paid"
                        name="paid"
                        class="gh-input"
                        value={{this.visibilityOptions.paidMembers}}
                        checked={{this.isPaidMembersChecked}}
                        {{on "click" this.updateVisibility}}
                    >
                    <span class="input-toggle-component"></span>
                    <span>Paid members</span>
                </label>
            {{else}}
                <label class="checkbox">
                    <input
                        type="checkbox"
                        name="members"
                        class="gh-input"
                        value={{this.visibilityOptions.freeMembers}}
                        checked={{this.isFreeMembersChecked}}
                        {{on "click" this.updateVisibility}}
                    >
                    <span class="input-toggle-component"></span>
                    <span>Members</span>
                </label>
            {{/if}}
        </div>
    </div>
</div>